<template>
  <div>
    <div :class="activeName == 'home' ? 'bgc' : ''">
      <div class="headerBox">
        <div class="headerLeft" :class="activeName == 'home' ? 'cfff' : 'c000'">
          <div class="headerIcon header"><i class="el-icon-position"></i></div>
          <div class="header">体育馆管理系统</div>
        </div>
        <div>
          <div class="loginout" @click="loginout">退出</div>
        </div>
      </div>
      <div :class="activeName == 'home' ? 'homeStyle' : 'someColor'">
        <el-tabs
          v-model="activeName"
          class="pr40"
          type="card"
          @tab-click="handleClick"
        >
          <el-tab-pane label="首页" class="" name="home"> </el-tab-pane>
          <el-tab-pane label="场地预约" name="first">
            <el-card class="placeOrder">
              <div class="placeOrderHeader">
                <div class="placeOrderHeaderLabel">场馆:</div>
                <div class="headerItemList">
                  <div class="headerItem" @click="curIPlaceId = NaN">全部</div>
                  <div class="headerItem" :class="curIPlaceId==1?'redColor':''" @click="curIPlaceId = 1">场地1</div>
                  <div class="headerItem" :class="curIPlaceId==2?'redColor':''" @click="curIPlaceId = 2">场地2</div>
                  <div class="headerItem" :class="curIPlaceId==3?'redColor':''" @click="curIPlaceId = 3">场地3</div>
                  <div class="headerItem" :class="curIPlaceId==4?'redColor':''" @click="curIPlaceId = 4">场地4</div>
                  <div class="headerItem" :class="curIPlaceId==5?'redColor':''" @click="curIPlaceId = 5">场地5</div>
                  <div class="headerItem" :class="curIPlaceId==6?'redColor':''" @click="curIPlaceId = 6">场地6</div>
                </div>
              </div>
              <div class="placeOrderHeader">
                <div class="placeOrderHeaderLabel">项目:</div>
                <div class="headerItemList">
                  <div class="headerItem" @click="curIPlaceType = NaN">全部</div>
                  <div class="headerItem" :class="curIPlaceType==0?'redColor':''" @click="curIPlaceType = 0">空地</div>
                  <div class="headerItem" :class="curIPlaceType==1?'redColor':''" @click="curIPlaceType = 1">篮球场</div>
                  <div class="headerItem" :class="curIPlaceType==2?'redColor':''" @click="curIPlaceType = 2">羽毛球场</div>
                  <div class="headerItem" :class="curIPlaceType==3?'redColor':''" @click="curIPlaceType = 3">乒乓球场</div>
                  <div class="headerItem" :class="curIPlaceType==4?'redColor':''" @click="curIPlaceType = 4">排球场</div>
                </div>
              </div>
            </el-card>
            <div class="placeOrder">
              <div class="placeOrderList">
                <el-card v-for="(item, index) in placeDataCom" :key="index" class="crad50">
                  <div class="placeOrderListItem" @click="orderPlace(item.placeId)">
                    <div>
                      <img
                        class="itemImg2"
                        :src="IMGPATH + item.imgPath"
                        alt=""
                      />
                    </div>
                    <div class="itemRight">
                      <div>场地{{ item.placeId }}</div>
                      <div>
                        最早可于入场前4日12:00购票，支持在线购票、支持线下购票
                      </div>
                      <div class="orderPlace">订场</div>
                    </div>
                    <div class="itemIconRight">
                      <i class="el-icon-arrow-right"></i>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="演出购票" name="second">
            <div class="placeOrder">
              <div class="placeOrderList">
                <el-card
                  v-for="(item, index) in activityData"
                  :key="index"
                  class="crad50"
                >
                  <div
                    class="placeOrderListItem"
                    @click="orderActivity(item.activityId)"
                  >
                    <div>
                      <img class="itemImg2" :src="IMGPATH + item.imgPath" alt="" />
                    </div>
                    <div class="itemRight">
                      <div>{{ item.activityName }}</div>
                      <div class="line_2">简介： {{ item.introduce }}</div>
                      <div>状态:{{ activeStatus[item.status] }}</div>
                    </div>
                    <div class="itemIconRight">
                      <i class="el-icon-arrow-right"></i>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="课程购买" name="third">
            <div class="placeOrder">
              <div class="placeOrderList">
                <el-card
                  v-for="(item, index) in courseData"
                  :key="index"
                  class="crad50"
                >
                  <div
                    class="placeOrderListItem"
                    @click="orderCourseUser(item.courseId)"
                  >
                    <div>
                      <img class="itemImg2" :src="IMGPATH + item.imgPath" alt="" />
                    </div>
                    <div class="itemRight">
                      <div>{{ item.courseName }}</div>
                      <div class="line_2">简介：{{ item.introduce }}</div>
                    </div>
                    <div class="itemIconRight">
                      <i class="el-icon-arrow-right"></i>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="购买商品" name="fourth">
            <div class="flex fullHeight">
              <el-tabs
                value="3"
                tab-position="left"
                v-model="activeTab"
                @tab-click="handleTabsClick"
              >
                <el-tab-pane label="文体用品" name="1"></el-tab-pane>
                <el-tab-pane label="食品" name="2"></el-tab-pane>
                <el-tab-pane label="饮料" name="3"></el-tab-pane>
              </el-tabs>
              <div style="flex: 1;">
                <el-card v-if="commodityData.length > 0" class="fullHeight">
                  <div class="commodityDataList">
                    <div
                      v-for="(item, index) in commodityData"
                      :key="index"
                      class="placeDialog commodityItem"
                    >
                      <img class="itemImg2" :src="IMGPATH + item.imgPath" alt="" />
                      <div class="placeDialogRight">
                        <div>{{ item.commodityName }}</div>
                        <div>￥{{ item.price }} 库存：{{ item.inventory }}</div>
                        <el-input-number
                          v-model="item.num"
                          :min="0"
                          :max="item.inventory"
                          label="张数"
                        ></el-input-number>
                      </div>
                    </div>
                  </div>
                  <div class="centerButton">
                    金额：{{ totalCommodityMoney }}
                    <el-button type="primary" @click="buyCommodity"
                      >立即购买</el-button
                    >
                  </div>
                </el-card>
                <el-card v-else class="fullHeight">
                  暂无数据
                </el-card>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="个人中心" name="fifth">
            <el-tabs
              tab-position="left"
              style="height: 70vh;"
              @tab-click="handleTabClick2"
            >
              <el-tab-pane label="购买商品">
                <el-table
                  :data="myBuyCommodity"
                  style="width: 90%;height: 70vh;overflow:scroll; "
                >
                  <el-table-column prop="orderId" label="单号">
                  </el-table-column>
                  <el-table-column prop="type" label="类型">
                    <template slot-scope="scope">
                      {{ orderTypeEnum[scope.row.type] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="price" label="金额"> </el-table-column>
                  <el-table-column prop="finishTime" label="时间">
                  </el-table-column>
                  <el-table-column prop="message" label="描述">
                  </el-table-column>
                   <el-table-column prop="status" label="订单状态">
                    <template slot-scope="scope">
                      {{ orderStatusEnum[scope.row.status] }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="预约场地">
                <el-table
                  :data="myBuyPlace"
                  style="width: 90%;height: 70vh;overflow:scroll; "
                >
                  <el-table-column prop="placeId" label="场地">
                    <template slot-scope="scope">
                      场地{{ scope.row.placeId }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="day" label="日期"> </el-table-column>
                  <el-table-column prop="startTime" label="开始时间">
                  </el-table-column>
                  <el-table-column prop="endTime" label="结束时间">
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="购买门票">
                <el-table
                  :data="myBuyActivity"
                  style="width: 90%;height: 70vh;overflow:scroll; "
                >
                  <el-table-column prop="activityName" label="活动名称">
                  </el-table-column>
                  <el-table-column prop="type" label="票类型">
                    <template slot-scope="scope">
                      {{ typeEnum[scope.row.type + ""] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="placeId" label="场地号">
                    <template slot-scope="scope">
                      场地{{ scope.row.placeId }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="seatRow" label="排"> </el-table-column>
                  <el-table-column prop="seatColumn" label="坐">
                  </el-table-column>
                  <el-table-column prop="startTime" label="开始时间">
                  </el-table-column>
                  <el-table-column prop="endTime" label="结束时间">
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="购买课程">
                <el-table
                  :data="myBuyCourse"
                  style="width: 90%;height: 70vh;overflow:scroll; "
                >
                  <el-table-column prop="courseName" label="课程名">
                  </el-table-column>
                  <el-table-column prop="shouldCount" label="小节数">
                  </el-table-column>
                  <el-table-column prop="placeId" label="场地号">
                    <template slot-scope="scope">
                      场地{{ scope.row.placeId }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="startTime" label="开始时间">
                  </el-table-column>
                  <el-table-column prop="endTime" label="结束时间">
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="个人信息">
                <el-card class="fullHeight">
                  <div>个人余额： {{balance}}</div>
                  <el-button type="text" @click="getBalance">刷新余额</el-button>
                  <el-button type="text" @click="dialogVisible = true">充值</el-button>
                  <el-button type="text" @click="changePassVisible = true">修改密码</el-button>
                  
                  <el-dialog
                    title="修改密码"
                    :visible.sync="changePassVisible"
                    width="30%">
                    <el-input v-model="oldPassword" type="password" placeholder="请输入旧密码" style="margin-bottom:10px;"></el-input>
                  <el-input v-model="newPassword" type="password" placeholder="请输入新密码" style="margin-bottom:10px;"></el-input>
                    <el-input v-model="sureNewPassword" type="password" placeholder="请确认新密码"></el-input>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="changePassVisible = false">取 消</el-button>
                      <el-button type="primary" @click="confirmChangePassword">确 定</el-button>
                    </span>
                  </el-dialog>

                  <el-dialog
                    title="充值"
                    :visible.sync="dialogVisible"
                    width="30%">
                    <el-input v-model="rechargeNum" placeholder="请输入充值金额"></el-input>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="confirmRechargeNum">确 定</el-button>
                    </span>
                  </el-dialog>
                  <el-dialog
                    title="充值"
                    :visible.sync="payModalStrModal"
                    width="30%">
                    <div v-html="payModalStr"></div>
                  </el-dialog>

                </el-card>

              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-card v-if="activeName == 'home'" class="hotPlace">
        <div style="margin-bottom: 10px;">热门场地</div>
        <div class="placeList">
          <div
            v-for="(item, index) in placeData"
            :key="index"
            class="placeItem"
          >
            <div style="margin-right: 6px">
              <img class="myimg" :src="IMGPATH + item.imgPath" alt="" />
            </div>
            <div style="text-align: center">{{ item.placeName }}</div>
          </div>
        </div>
      </el-card>

      <el-dialog title="预定场地" :visible.sync="placeOrderView">
        <el-card>
          <div class="placeDialog">
            <img
              class="itemImg2"
              :src="
                IMGPATH +
                  (placeData[curPlaceId - 1]
                    ? placeData[curPlaceId - 1].imgPath
                    : '')
              "
              alt=""
            />
            <div class="placeDialogRight">
              <div>场地{{ curPlaceId }}</div>
              <div>开放时间： 8:00 - 20:00</div>
            </div>
          </div>
          <div class="placeDialogTime">
            <div>选择时间:</div>
            <div class="timelistIDBox">
              <div class="timelistItem" :class="activeDateIndex == index ?'colorPink' : ''" v-for="(item, index) in tiemList" :key="index" @click="getAbleDateId(item.date);activeDateIndex=index">
                <div>{{ item.dayOfWeek }}</div>
                <div>{{ item.date }}</div>
              </div>
            </div>
            <div>选择时段:</div>
            <div class="timelistIDBox">
              <div class="timelistIDItem" :class="(placeDialogForm.id == item.id ?'colorPink' : '') + ' ' + `status${item.status}`" v-for="(item, index) in tiemList2" :key="index" @click="setPlaceDialogFormId(item.id)">
                <div>{{ item.status == 0 ? '可以预约：' : '已被预约：' }}  {{ item.startTime }} - {{ item.endTime }}</div>
              </div>
            </div>
            <!-- <el-date-picker
              v-model="placeDialogForm.date"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker> -->
          </div>
          <div class="centerButton">
            <el-button type="primary" @click="reservePlace">立即预定</el-button>
          </div>
        </el-card>
      </el-dialog>

      <el-dialog title="演出购票" :visible.sync="ActivityOrderView">
        <el-card>
          <div class="placeDialog">
            <img class="itemImg2" :src="IMGPATH +curActivity.imgPath" alt="" />
            <div class="placeDialogRight">
              <div>{{ curActivity.activityName }}</div>
              <div>主办方：{{ curActivity.hostName }}</div>
              <div>状态：{{ activeStatus[curActivity.status] }}</div>
              <div>开始时间：{{ curActivity.startTime }}</div>
              <div>结束时间: {{ curActivity.endTime }}</div>
              <div>简介： {{ curActivity.introduce }}</div>
            </div>
          </div>
          <div class="placeDialogTime">
            <el-table :data="curActivity.seats" style="width: 100%">
              <el-table-column prop="type" label="座位等级">
                <template slot-scope="scope">
                  {{ typeEnum[scope.row.type] }}
                </template>
              </el-table-column>
              <el-table-column prop="price" label="金额" width="130">
              </el-table-column>
              <el-table-column prop="seatStatus" label="情况" width="130">
                <template slot-scope="scope">
                  <div style="text-align: center;" :style="{backgroundColor: seatStatusClassEnum[scope.row.seatStatus]}">
                    {{ seatStatusEnum[scope.row.seatStatus] }}
                  </div>

                </template>
              </el-table-column>
              <el-table-column prop="recFlag" label="张数">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.num"
                    @change="handleMoneyChange"
                    :min="0"
                    :max="2"
                    label="张数"
                  ></el-input-number>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="centerButton">
            <el-radio v-model="radio" label="1">阅读并同意预约须知</el-radio>
          </div>
          <div class="centerButton">
            金额：{{ totalMoney }}
            <el-button type="primary" @click="buyTick">立即购票</el-button>
          </div>
        </el-card>
      </el-dialog>

      <el-dialog title="课程购买" :visible.sync="courseOrderView">
        <el-card>
          <div class="placeDialog">
            <img class="itemImg2" :src="IMGPATH + curCourseData.imgPath" alt="" />
            <div class="placeDialogRight">
              <div>课程名称: {{ curCourseData.courseName }}</div>
              <div>教师名称: {{ curCourseData.teacherName }}</div>
              <div>价格：{{ curCourseData.coursePrice }}</div>
              <div>开始时间：{{ curCourseData.startTime }}</div>
              <div>结束时间: {{ curCourseData.endTime }}</div>
              <div class="line_2">简介： {{ curCourseData.introduce }}</div>
            </div>
          </div>
          <div class="placeDialogTime">
            <el-table :data="curCourseData.list" style="width: 100%">
              <el-table-column prop="shouldCount" label="节次">
              </el-table-column>
              <el-table-column prop="placeId" label="场地" width="100">
              </el-table-column>
              <el-table-column prop="count" label="教师" width="100">
                <template >
                  {{ curCourseData.teacherName }}
                </template>
              </el-table-column>
              <el-table-column prop="startTime" label="开始时间" width="180">
              </el-table-column>
              <el-table-column prop="endTime" label="结束时间" width="180">
              </el-table-column>
            </el-table>
          </div>
          <div class="centerButton">
            金额：{{ curCourseData.coursePrice }}
            <el-button type="primary" @click="buyCourse">立即购买</el-button>
          </div>
        </el-card>
      </el-dialog>
    </div>
    <div v-if="activeName == 'home'" style="height: 20vh; color: transparent;">
      ii
    </div>
    <div v-if="activeName == 'home'">
      <div><h2 class="item-title">通知公告</h2></div>
      <div class="item-title-english">
        <span></span><span></span>
        <p>NOTICE</p>
        <span></span><span></span>
      </div>
      <div class="noticeBox">
        <div v-for="(item, index) in infoListL" :key="index" class="noticeBoxItem">
          <h4>{{ item.total }}</h4>
          <div class="noticeBoxSpan">{{ item.createTime }}</div>
          <p class="noticeBoxP"> {{ item.body }}</p>
          <div class="noticeBoxBut" @click="showNoticeBox(item.id)">查看详情</div>
        </div>
      </div>
    </div>
    <el-dialog title="通知详情" :visible.sync="noticeBoxView">
        <div class="placeDialog2">
          <div class="placeDialogRight" style="text-align: center;">
            <h2>{{ infoDetail.total }}</h2>
            <div style="margin-top: 20px;"> {{ infoDetail.createTime }}</div>
            <div style="margin-top: 30px;text-align: left;">{{ infoDetail.body }}</div>
          </div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
// import { BASEURL } from "../network/config";
import api from "../network/home";
export default {
  data() {
    return {
      activeTab: '1',
      placeData: [],
      curIPlaceId: 0,
      curIPlaceType: NaN,
      activityData: [],
      courseData: [],
      commodityData: [],
      activeName: "home",
      placeOrderView: false,
      placeDialogForm: {},
      curPlaceId: 0,
      curActivity: {},
      ActivityOrderView: false,
      curCourseData: {},
      courseOrderView: false,
      noticeBoxView: false,
      dialogVisible:false,
      changePassVisible:false,
      typeEnum: {
        "1": "高级",
        "2": "中级",
        "3": "低级",
      },
      activeStatus: {
        "-1": "未开始",
        "-2": "取消",
        "1": "进行中",
        "0": "已结束",
      },
      seatStatusEnum:{
        "1":'宽松',
        "2":'拥挤',
        "3":'售罄',
      },
      seatStatusClassEnum:{
        "1":'#67C23A',
        "2":'#E6A23C',
        "3":'#F56C6C',
      },
      orderTypeEnum: {
        "1":'商品',
        "2":'课程',
        "3":'活动',
        "4":'充值',
      },
      orderStatusEnum: {
        "-1":'创建',
        "1":'付款',
        "2":'退款',
      },
      myBuyPlace: [],
      myBuyCommodity: [],
      myBuyCourse: [],
      myBuyActivity: [],
      infoListL:[],
      infoDetail: {},
      tiemList:[],
      tiemList2:[],
      activeDateIndex:-1,
      radio:'',
      balance: 0,
      rechargeNum: '',
      payModalStr:'',
      oldPassword:"",
      newPassword:"",
      sureNewPassword:"",
      payModalStrModal:false,
    };
  },
  computed: {
    totalMoney() {
      let total = 0;
      let list = this.curActivity.seats || [];
      list.forEach((item) => {
        total += item.price * (item.num || 0);
      });
      return total || 0;
    },
    totalCommodityMoney() {
      let total = 0;
      let list = this.commodityData || [];
      list.forEach((item) => {
        total += item.price * (item.num || 0);
      });
      return total || 0;
    },
    placeDataCom(){
      return this.placeData.filter(item=>{
        console.log(this.curIPlaceId, this.curIPlaceType);
        let flag = true
        if(this.curIPlaceId && item.placeId != this.curIPlaceId) {
          flag = false
        }
        if((this.curIPlaceType || this.curIPlaceType ==0) && item.placeType != this.curIPlaceType) {
          flag = false
        }
        return flag
      })
    }
  },
  methods: {
    getHomeData() {
      api.getPlaceList().then((res) => {
        this.placeData = res.data.data.map((item) => {
          return {
            ...item,
          };
        });
      });
      const p = {
        pageNum: 1,
        pageSize: 100,
      };
      api.userActivityPage(p).then((res) => {
        this.activityData = res.data.data.records;
      });
      api.userCoursePage(p).then((res) => {
        this.courseData = res.data.data.records;
      });
      this.userCommodityPage();
      this.userCenterPlace();
      this.userCenterTicket();
      this.userCenterCourse();
      this.userCenterOrder();
      this.getInfoPage()
      this.getBalance()
    },
    userCommodityPage() {
      const p = {
        pageNum: 1,
        pageSize: 100,
        type: this.activeTab,
      };
      api.userCommodityPage(p).then((res) => {
        this.commodityData = res.data.data.records;
      });
    },
    userCenterPlace() {
      const p = {
        pageNum: 1,
        pageSize: 100,
      };
      api.userCenterPlace(p).then((res) => {
        this.myBuyPlace = res.data.data.records;
      });
    },

    userCenterTicket() {
      const p = {
        pageNum: 1,
        pageSize: 100,
      };
      api.userCenterTicket(p).then((res) => {
        this.myBuyActivity = res.data.data.records;
      });
    },

    userCenterCourse() {
      const p = {
        pageNum: 1,
        pageSize: 100,
      };
      api.userCenterCourse(p).then((res) => {
        this.myBuyCourse = res.data.data.records;
      });
    },

    userCenterOrder() {
      const p = {
        pageNum: 1,
        pageSize: 100,
      };
      api.userCenterOrder(p).then((res) => {
        this.myBuyCommodity = res.data.data.records;
      });
    },

    getInfoPage() {
      const p = {
        pageNum: 1,
        pageSize: 100,
      };
      api.getInfoPage(p).then((res) => {
        this.infoListL = res.data.data.records;
      });
    },

    handleClick() {},
    handleMoneyChange() {},
    handleTabsClick(e) {
      console.log(e);
      this.userCommodityPage(Number(e.index) + 1);
    },
    handleTabClick2() {
      this.userCenterPlace();
      this.userCenterTicket();
      this.userCenterCourse();
      this.userCenterOrder();
    },

    orderPlace(id) {
      api.getAbleDate(id).then(res=>{
        console.log(res);
        this.tiemList = res.data.data
      })
      this.curPlaceId = id;
      this.placeOrderView = true;
    },
    orderActivity(id) {
      api.actUserDetail(id).then((res) => {
        const data = res.data.data.activity
        const seat = res.data.data.seat
        this.curActivity = {
          ...data,
          seats:seat
        }
        this.ActivityOrderView = true;
      });
    },
    orderCourseUser(id) {
      api.courseUserDetail(id).then((res) => {
        const data = res.data.data.course
        const list = res.data.data.list
        this.curCourseData = {
          ...data,
          list,
        };
        this.courseOrderView = true;
      });
    },

    reservePlace() {
      const p = {
        placeUseRecordId: this.placeDialogForm.id,
      };
      api.reservePlace(p).then((res) => {
        if(res.data.code=="500"){
          this.$message.error(res.data.data)
          return
        }
        this.$message.success("预定成功");
        this.placeOrderView = false;
        this.placeDialogForm.id = -1
        this.activeDateIndex = -1
        this.tiemList=[]
        this.tiemList2=[]
      });
    },
    buyTick() {
      if(!this.radio){
        this.$message.error("请先阅读并同意预约须知")
        return
      }
      let total = 0;
      let list = this.curActivity.seats || [];
      let arr = [];
      list.forEach((item) => {
        arr.push(item.num || 0);
        total += item.price * (item.num || 0);
      });
      if(total ==0){
        this.$message.error("请先选票")
        return
      }
      const p = {
        activityId: this.curActivity.activityId,
        high: arr[0],
        mid: arr[1],
        low: arr[2],
        totalPrice: total,
      };
      api.buyActivity(p).then(() => {
        this.$message.success("预定成功");
        this.ActivityOrderView = false;
      });
    },
    buyCourse() {
      const p = {
        courseId: this.curCourseData.courseId,
      };
      api.buyCourse(p).then(() => {
        this.$message.success("购买成功");
        this.courseOrderView = false;
      });
    },
    buyCommodity() {
      let list = this.commodityData || [];
      let arr = [];
      list.forEach((item) => {
        if (item.num > 0) {
          arr.push({
            id: item.id,
            count: item.num,
          });
        }
      });
      const p = arr;
      api.buyCommodity(p).then(() => {
        this.$message.success("购买成功");
        this.courseOrderView = false;
        this.userCommodityPage()
      });
    },
    loginout() {
      this.$router.push("./login");
    },
    showNoticeBox(id){
      api.getInfoDetail(id).then(res=>{
        console.log(res);
        this.infoDetail = res.data.data
        this.noticeBoxView = true
      })
    },
    getBalance () {
      api.getUserBalance().then(({data})=>{
        this.balance = data.data
      })
    },
    getAbleDateId(day){
      const p = {
        placeId: this.curPlaceId,
        day,
      }
      api.getAbleDateId(p).then(res=>{
        console.log(res);
        this.tiemList2 = res.data.data.records
      })
    },
    setPlaceDialogFormId(id){
      this.$set(this.placeDialogForm,'id',id)
    },
    confirmRechargeNum(){
      api.createOrder({account: Number(this.rechargeNum)}).then(res=>{
        console.log(res.data.data);
        const { totalAmount, subject, orderId } = res.data.data
        // api.getPcPayment(subject,orderId,totalAmount).then(res=>{
        //   // this.dialogVisible = false
        //   // this.payModalStr = res.data
        //   // console.log(res.data);
        //   // this.payModalStrModal = true
        //   window.open(res)
        // })
        window.open(this.BASEURL + `/alipay/pcPayment?subject=${subject}&outTradeNo=${orderId}&totalAmount=${totalAmount}`)
        this.dialogVisible = false
      })
    },
    confirmChangePassword(){
       api.changeUserPassword({ oldPwd : this.oldPassword ,newPwd: this.newPassword , checkNewPwd: this.sureNewPassword }).then(res => {
        if(res.data.code==="500"){
            this.$message.error(res.data.data)
        }else{
             this.$message.success("修改成功，请重新登录")
             this.loginout()
        }
          this.dialogVisible = false
       })

    }
  },
  mounted() {
    this.getHomeData();
  },
};
</script>

<style lang="scss" scoped>
.headerBox {
  display: flex;
  margin: 0 10px;
  margin-right: 30px;
  margin-left: 40px;
  justify-content: space-between;
  .headerLeft {
    display: flex;
  }
  .headerIcon {
    margin: 0 20px;
  }
  .loginout {
    height: 30px;
    line-height: 60px;
    cursor: pointer;
  }
}
.bgc {
  background-image: url("../assets/index.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100vw;
  height: 80vh;
  overflow: hidden;
}
.header {
  text-align: center;
  font-size: 30px;
  height: 60px;
  line-height: 60px;
  // color: #fff;
}
.c000 {
  color: #000;
}
.cfff {
  color: #fff;
}
.hotPlace {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 40px;
  width: calc(100% - 180px);
  max-width:1440px;
}
.placeList {
  display: flex;
}
.placeItem {
  display: flex;
  flex-direction: column;
  .itemImg {
    width: 190px;
    height: 200px;
  }
}
// .pr40{
//   padding-left: 40px;
// }
.someColor {
  background-color: #e4e7ed;
}
.someColor2 {
  color: red !important;
  // background-color: rgba($color: #a43a3a, $alpha: 0.5);
}
.placeOrder {
  margin: 20px 40px;
  .placeOrderHeader {
    display: flex;
    height: 50px;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
    .placeOrderHeaderLabel {
      width: 100px;
    }
  }
}
.orderPlace{
  width: 35px;
  border-radius: 2px;
  padding: 4px 6px;
  background-color: #e1ecfc;
  margin: 0 4px;
  color: #333;
  cursor: pointer;
  font-size: 14px;
}
.headerItemList {
  display: flex;
  .headerItem {
    width: 80px;
    text-align: center;
    cursor: pointer;
  }
}
.placeOrderList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.placeOrderListItem {
  height: 150px;
  display: flex;
}
.itemImg2 {
  width: 200px;
  height: 140px;
}
.itemRight {
  display: flex;
  width: 300px;
  margin-left: 20px;
  flex-direction: column;
  justify-content: space-around;
}
.itemIconRight {
  font-size: 40px;
  line-height: 140px;
  margin-left: 10px;
}
.crad50 {
  width: 47%;
  margin-bottom: 10px;
}
.flex {
  display: flex;
  width: 100%;
}
.placeDialog {
  display: flex;
}
.placeDialog2{
  // display: flex;
  height: 50vh;
}
.placeDialogTime {
  margin-top: 20px;
}
.placeDialogRight {
  flex: 1;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.centerButton {
  margin-top: 30px;
  text-align: center;
}
.line_2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.commodityDataList {
  display: flex;
  // justify-content: space-around;
  flex-wrap: wrap;
}
// ::v-deep .el-tabs__item.is-active{
//   color: red;
// }
.myimg {
  width: 200px;
  height: 200px;
  object-fit: cover;
}
.homeStyle {
  margin-left: 20px;
}
::v-deep .homeStyle .el-tabs--card > .el-tabs__header {
  border: none;
}
::v-deep .homeStyle .el-tabs--card > .el-tabs__header .el-tabs__item {
  // border-bottom: 1px solid #E4E7ED;
  background-color: transparent;
  border: 0;
  color: #fff;
  font-size: 20px;
}
::v-deep .homeStyle .el-tabs--card > .el-tabs__header {
  border: 0;
  color: #fff;
  // background-color: #fff;
}
::v-deep .homeStyle .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0;
  color: #fff;
}
::v-deep .homeStyle .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 2px solid rgb(153, 0, 7);
}

::v-deep .someColor .el-tabs--card > .el-tabs__header {
  border: none;
}
::v-deep .someColor .el-tabs--card > .el-tabs__header .el-tabs__item {
  // border-bottom: 1px solid #E4E7ED;
  background-color: transparent;
  border: 0;
  color: #000;
  font-size: 20px;
}
::v-deep .someColor .el-tabs--card > .el-tabs__header {
  border: 0;
  color: #000;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}
::v-deep .someColor .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0;
  color: #000;
}
::v-deep .someColor .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 2px solid rgb(153, 0, 7);
}

::v-deep .el-tabs__nav-scroll {
  margin-left: 40px;
}
.item-title {
  color: #333;
  font-size: 34px;
  text-align: center;
}
.item-title-english {
  margin: 0 auto;
  margin-top: 7px;
  height: 18px;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #871c16;
  font-size: 14px;
  text-transform: uppercase;
}
.item-title-english p {
  background: #feeceb;
  margin: 0 2px;
  padding: 0 2px;
  min-width: 114px;
}
.item-title-english span {
  display: block;
  width: 19px;
  height: 19px;
  background: #feeceb;
  margin: 0 2px;
}
.noticeBox {
  margin-top: 40px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.noticeBoxItem {
  width: 588px;
  background-color: #f8f8f8;
  padding: 16px;
  color: #2e2929;
  margin-bottom: 24px;
}
.noticeBox{
  margin: 40px auto;
  display: flex;
  justify-content: space-around;
  max-width:1440px;

  .noticeBoxSpan{
    margin-top: 4px;
    font-size: 14px;
  }
  .noticeBoxP{
    margin-top: 14px;
    color: #7e838e;
    font-size: 16px;
    min-height: 50px;
    overflow: hidden;
  }
  .noticeBoxBut{
    margin-top: 22px;
    display: inline-block;
    padding: 8px 12px;
    background-color: #feeceb;
    color: #871c16;
    font-size: 14px;
    cursor: pointer;
  }
}
.redColor{
  color: red;
}
.timelistBox{
  display: flex;
  flex-wrap: wrap;
}
.timelistItem{
  height: 40px;
  padding: 10px 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0px 0px 10px 0px rgba(205, 205, 205, 0.5);
}
.colorPink{
  background-color: #d270c1;
}
.timelistIDBox {
  display: grid;
  grid-gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 8px;
}
.timelistIDItem{
  height: 50px;
  color: rgba(0, 0, 0, 0.8);
  line-height: 50px;
  cursor: pointer;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0px 0px 10px 0px rgba(205, 205, 205, 0.5);
}
.status1{
  background-color: #F56C6C;
}
// .status0{
//   background-color: #67C23A;
// }
.fullHeight{
  height: 80vh;
}
.commodityItem{
  width: 30%;
  height: 140px;
  margin-right: 30px;
}
</style>
